<template>
  <!-- 提现添加银行卡 -->
  <el-dialog
    :model-value="dialogVisible"
    :title="form.type == 'add' ? $t('添加银行卡') : $t('编辑银行卡')"
    width="700"
    center
    :destroy-on-close="true"
    @close="emits('closeDialog')"
  >
    <el-form :model="form" width="100%" label-width="220px" ref="dialogFormRef" :rules="rules">
      <el-form-item prop="card_type">
        <el-radio-group
          v-model="form.card_type"
          @change="handleCardtype"
          :disabled="form.type == 'edit'"
        >
          <el-radio :label="1" size="large">{{ $t("企业账户") }}</el-radio>
          <el-radio :label="2" size="large">{{ $t("个人账户") }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('账户名称')" prop="name">
        <el-input v-model="form.name" :placeholder="$t('请输入账户名称')" clearable />
      </el-form-item>
      <el-form-item :label="$t('收款人名称')" prop="card_name">
        <el-input v-model="form.card_name" :placeholder="$t('收款人名称')" disabled />
      </el-form-item>
      <el-form-item :label="$t('银行账号')" prop="card_number">
        <el-input v-model="form.card_number" :placeholder="$t('请输入银行账号')" clearable />
      </el-form-item>
      <el-form-item :label="$t('银行名称')" prop="bank">
        <el-input v-model="form.bank" :placeholder="$t('请输入银行名称')" clearable />
      </el-form-item>
      <el-form-item :label="$t('银行国家/地区')">
        <el-input v-model="form.country" :placeholder="$t('请输入银行国家/地区')" clearable />
      </el-form-item>
      <el-form-item :label="$t('银行地址')" prop="address">
        <el-input v-model="form.address" :placeholder="$t('请输入银行地址')" clearable />
      </el-form-item>
      <el-form-item :label="$t('SWIFT码')">
        <el-input v-model="form.swift_code" :placeholder="$t('请输入SWIFT码')" clearable />
      </el-form-item>
      <el-form-item :label="$t('币种')" prop="currency">
        <el-select v-model="form.currency" :placeholder="$t('请选择币种')" clearable class="w-60">
          <el-option v-for="item in currencyList" :key="item.key" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('银行补充信息')">
        <el-input v-model="form.extended" :placeholder="$t('请输入银行补充信息（选填）')" clearable />
      </el-form-item>
      <el-form-item :label="$t('收款人地址')">
        <el-input v-model="form.payee_address" :placeholder="$t('请输入收款人地址（选填）')" clearable />
      </el-form-item>
      <el-form-item :label="$t('银行预留手机号')">
        <el-input v-model="form.phone" :placeholder="$t('请输入银行预留手机号（选填）')" clearable />
      </el-form-item>
      <el-form-item :label="$t('银行预留邮箱')">
        <el-input v-model="form.email" :placeholder="$t('请输入银行预留邮箱（选填）')" clearable />
      </el-form-item>
    </el-form>
    <div class="w-full flex justify-center mt-5">
      <el-button
        type="primary" :icon="SuccessFilled"
        class="w-32"
        @click="submit(form)"
        :disabled="!form.card_name"
        >{{ $t("提交") }}</el-button>
    </div>
  </el-dialog>
</template>
<script setup>
import { ref, reactive } from "vue";
import { SuccessFilled } from '@element-plus/icons-vue'
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const dialogFormRef = ref("");
defineProps({
  dialogVisible: {
    type: Boolean,
    default: false,
  },
  currencyList: {
    type: Array,
    default: [],
  },
  form: {
    type: Object,
    default: {
      card_type: "",
      card_id: "",
      type: "",
      bank: "",
      branch: "",
      country: "",
      card_name: "",
      card_number: "",
      swift_code: "",
      address: "",
      currency: "",
      phone: "",
      email: "",
      extended: "",
    },
  },
});
// 校验
const rules = {
  card_type: [{ required: true, message: t("请选择账户类型"), trigger: "blur" }],
  name: [{ required: true, message:t("请输入账户名称"), trigger: "blur" },],
  bank: [{ required: true,  message:t("请输入银行名称"), trigger: "blur" }],
  address: [{ required: true,  message: t("请输入银行地址"), trigger: "blur" }],
  card_name: [{ required: true, message: t("无收款人名称"), trigger: "blur" }],
  card_number: [{ required: true,  message: t("请输入银行账号"), trigger: "blur" }],
  currency: [{ required: true, message: t("请选择币种"), trigger: "blur" }],
};
const emits = defineEmits([
  "closeDialog",
  "submitForm",
  "handleCardTypeChange",
]);
const handleCardtype = (value) => {
  emits("handleCardTypeChange", value);
};

const submit = (dialogForm) => {
  // console.log("提交参数----", dialogForm);
  dialogFormRef.value
    .validate()
    .then(async () => {
      try {
        const param = Object.assign({}, dialogForm);
        emits("submitForm", param);
      } catch (error) {
        console.log(error);
      }
    })
    .catch((error) => {
      console.log(error);
    });
};
</script>
